<template>
  <div>
    <h1>Vue 测试界面 1</h1>
    <div>
      <table class="testone">
        <tr v-for="(data,index) in getTh"
            :key="index">
          <td>{{data.title}} </td>
          <li v-for="item in data.child"
              :key="item">{{item.text}}</li>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      property: 'value'
    }
  },
  computed: {
    getTh () {
      let arr = [
        { title: 'one', index: 1, child: [{ text: 'a' }] },
        { title: 'two', index: 2, child: [{ text: 'b' }, { text: 'c' }] },
        { title: 'three', index: 3, child: [{ text: 'b' }, { text: 'c' }] },
        { title: 'four', index: 4, child: [{ text: 'b' }, { text: 'c' }] }
      ]
      return arr
    }
  }
}
</script>
<style scoped>
.testone {
  border: 1px solid black;
}
</style>
